import {createStore} from 'vuex'
import {
    SAVE_TOKEN,
    COMP_COPY,
    COMP_DEL,
    COMP_TOP,
    COMP_BOTTOM,
    COMP_UP,
    COMP_DOWN,
    CURRENT_ID,
    SAVE_CONFIG,
    SAVE_DATA
} from '@/store/storeType'
import VuexPersistence from "vuex-persist";

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
});
export default createStore({
    state: {
        token: {
            token: "",
            expires: ""
        },
        // 屏幕配置
        canvasConfig: {
            // 屏幕名称
            name: '画布',
            // 屏幕简介
            desc: '',
            // 屏幕宽度
            width: 1920,
            // 屏幕高度
            height: 1080,
            // 屏幕缩放比例
            scale: 100,
            color: '#001529',
            // 屏幕背景图
            backgroundImage: 'http://datav.tpccn.com/uploads/2019/20191129180437.png',
        },
        // 图层位置
        layerIndex: 5000,
        minIndex: 5000,
        selectId: "", // 选中的id
        compObject: {
            // "dv-html": {
            //     editor: {
            //         width: 300,
            //         height: 300,
            //         y: 300,
            //         x: 300,
            //         active: true
            //     },
            //     render: "dv-html",
            //     config: {
            //         "_html": "自定义html",
            //         "_css": "",
            //         "_component": "v-swiper"
            //     }
            // },
            // "dv-iframe": {
            //     editor: {
            //         width: 300,
            //         height: 300,
            //         y: 0,
            //         x: 300,
            //         active: false
            //     },
            //     render: "dv-iframe",
            //     config: {
            //         "_src": '',
            //     }
            // },
            // "dv-count": {
            //     editor: {
            //         width: 300,
            //         height: 300,
            //         y: 0,
            //         x: 300,
            //         active: false
            //     },
            //     render: "dv-count",
            //     config: {
            //         "pbgColor": "rgba(255, 255, 255, 0)",
            //         "pbgImg": "http://datav.tpccn.com/uploads/2019/20191211165254.png",
            //         "pWidth": "50",
            //         "pMargin": "4",
            //         "symbolbgColor": "rgba(0, 81, 255, 0)",
            //         "symbolbgImg": "",
            //         "symbolWidth": "21",
            //         "fontColor": "#17D7F3",
            //         "fontSize": "60",
            //         "dStyle": "",
            //         "companypos": "bottom",
            //         "cfontSize": "20",
            //         "cfontColor": "#17D7F3",
            //         "iscompany": false,
            //         "ccontent": "元",
            //         "data": "123456"
            //     }
            // },
            // "dv-img": {
            //     editor: {
            //         width: 300,
            //         height: 300,
            //         y: 0,
            //         x: 300,
            //         active: false
            //     },
            //     render: "dv-img",
            //     config:{"rotate": false, "opacity": 1, "speed": 1, "imgurl": "http://datav.tpccn.com/uploads/2019/20191202092940.svg", "click": false}
            // },
            // "dv-tabs": {
            //     editor: {
            //         width: 300,
            //         height: 300,
            //         y: 0,
            //         x: 300,
            //         active: false
            //     },
            //     render: "dv-tabs",
            //     config:{
            //     "spacing": 8,
            //     "fontSize": 20,
            //     "fontColor": "#eeeeee",
            //     "bgColor": "#0b2241",
            //     "bgImg": "/uploads/2019/20191202085510.png",
            //     "border": {"width": 0, "color": "rgba(245, 0, 0, 0)"},
            //     "action": {
            //         "fontColor": "#4dffff",
            //         "bgImg": "/uploads/2019/20191202085510.png",
            //         "bgColor": "#0d618d",
            //         "borderColor": "rgba(255, 255, 255, 0)"
            //     },
            //     "active": [],
            //     "tab": [{"name": "选项卡1", "id": 1}, {"name": "选项卡2", "id": 2}]
            // }
            // },
            "dv-text": {
                editor: {
                    width: 300,
                    height: 300,
                    y: 0,
                    x: 300,
                    active: false,
                    name:"text"
                },
                render: "dv-text",
                config: {
                    "fontSize": 34,
                    "color": "#fff",
                    "isLink": false,
                    "link": "",
                    "speed": 5,
                    "lamp": false,
                    "click": false,
                    "context": "文本框",
                    "spacing": 1,
                    "align": "left",
                    "reverse": true,
                    "weight": "normal",
                    "backgroundColor": "rgba(0,0,0,0)",
                    "dateflag": true,
                    "dateformat": "YYYY-MM-DD hh:mm:ss",
                    "style": "",
                    "class": ""
                }
            },
            "dv-echarts": {
                editor: {
                    width: 300,
                    height: 300,
                    y: 0,
                    x: 300,
                    active: false,
                    name: "图表",
                    zIndex: 5000
                },
                render: "dv-echarts",
                config: {
                    option: {
                        title: {
                            text: '折线图堆叠'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '邮件营销',
                                type: 'line',
                                stack: '总量',
                                data: [120, 132, 101, 134, 90, 230, 210]
                            },
                            {
                                name: '联盟广告',
                                type: 'line',
                                stack: '总量',
                                data: [220, 182, 191, 234, 290, 330, 310]
                            },
                            {
                                name: '视频广告',
                                type: 'line',
                                stack: '总量',
                                data: [150, 232, 201, 154, 190, 330, 410]
                            },
                            {
                                name: '直接访问',
                                type: 'line',
                                stack: '总量',
                                data: [320, 332, 301, 334, 390, 330, 320]
                            },
                            {
                                name: '搜索引擎',
                                type: 'line',
                                stack: '总量',
                                data: [820, 932, 901, 934, 1290, 1330, 1320]
                            }
                        ]
                    }
                },
                data:{
                    data:[1,2,3,4,5,6]
                }
            }
        }
    },
    mutations: {
        [SAVE_TOKEN](state, data) {
            state.token = data
        },
        // 复制组件
        [COMP_COPY](state, id) {
            const compObj = JSON.parse(JSON.stringify(state.compObject[id]));
            compObj.editor.zIndex = ++state.layerIndex
            state.compObject["asdsadas111111111"] = compObj
            console.log(state.compObject)
        },
        // 删除组件
        [COMP_DEL](state, id) {
            delete state.compObject[id]
        },
        // 组件置顶
        [COMP_TOP](state, id) {
            state.compObject[id].editor.zIndex = ++state.layerIndex
        },
        // 组件置底
        [COMP_BOTTOM](state, id) {
            state.compObject[id].editor.zIndex = --state.minIndex
        },
        // 组件上移
        [COMP_UP](state, id) {
            if (state.layerIndex <= state.compObject[id].editor.zIndex) {
                state.layerIndex++
            }
            state.compObject[id].editor.zIndex++
        },
        // 组件下移
        [COMP_DOWN](state, id) {
            if (state.minIndex >= state.compObject[id].editor.zIndex) {
                state.minIndex--
            }
            state.compObject[id].editor.zIndex--
        },
        // 选中的id
        [CURRENT_ID](state, id) {
            state.selectId = id
        },
        // 保存配置
        [SAVE_CONFIG](state,data){
            state.compObject[state.selectId].config = data
        },
        // 保存数据
        [SAVE_DATA](state,data){
            state.compObject[state.selectId].data = data
        }
    }
    ,
    actions: {
        [SAVE_TOKEN]({commit}, data) {
            commit(SAVE_TOKEN, data)
        },
        // 复制组件配置
        [COMP_COPY]({commit}, id) {
            commit(COMP_COPY, id)
        },
        // 删除组件
        [COMP_DEL]({commit}, id) {
            commit(COMP_DEL, id)
        },
        // 组件置顶
        [COMP_TOP]({commit}, id) {
            commit(COMP_TOP, id)
        },
        // 组件置底
        [COMP_BOTTOM]({commit}, id) {
            commit(COMP_BOTTOM, id)
        },
        // 组件上移
        [COMP_UP]({commit}, id) {
            commit(COMP_UP, id)
        },
        // 组件下移
        [COMP_DOWN]({commit}, id) {
            commit(COMP_DOWN, id)
        },
        // 选中的id
        [CURRENT_ID]({commit}, id) {
            commit(CURRENT_ID, id)
        },
        // 保存配置
        [SAVE_CONFIG]({commit},data){
            commit(SAVE_CONFIG,data)
        },
        // 保存数据
        [SAVE_DATA]({commit},data){
            commit(SAVE_DATA,data)
        }
    }
    ,
    modules: {},
    plugins: [vuexLocal.plugin]
})
